<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">
	
	<ui:define name="head">
		<style type="text/css">
			.carItem {
				width:200px;
				height:100px;
				text-align:center;
			}
		</style>
	</ui:define>

	<ui:define name="content">

		<h1 class="title ui-widget-header ui-corner-all">Carousel - Selection</h1>
		<div class="entry">
			<p>As carousel is a data component, a column is necessary to process selection properly.</p>
		
			<h:form prependId="false">
				<p:carousel value="#{tableBean.carsSmall}" var="car" itemStyleClass="carItem" headerText="Cars">
					<p:column>
						<h:panelGrid columns="1" style="width:100%" cellpadding="5">
							<p:graphicImage value="/images/cars/#{car.manufacturer}.jpg"/> 
							
							<h:outputText value="Model: #{car.model}" />
							
							<p:commandLink update="carDetail" oncomplete="carDialog.show()" title="View Detail">
								<p:graphicImage value="/images/search.png"/> 
								<f:setPropertyActionListener value="#{car}" target="#{tableBean.selectedCar}" />
							</p:commandLink>
						</h:panelGrid>
					</p:column>
				</p:carousel>
				
				<p:dialog header="Car Detail" showEffect="fade" hideEffect="fade" modal="true"
					widgetVar="carDialog">
					
					<p:outputPanel id="carDetail" style="text-align:center;" layout="block">
						<p:graphicImage value="/images/cars/#{tableBean.selectedCar.manufacturer}.jpg"/>
						
						<h:panelGrid  columns="2" cellpadding="5">
							<h:outputLabel for="modelNo" value="Model No: " />
							<h:outputText id="modelNo" value="#{tableBean.selectedCar.model}" />
							
							<h:outputLabel for="year" value="Year: " />
							<h:outputText id="year" value="#{tableBean.selectedCar.year}" />
							
							<h:outputLabel for="color" value="Color: " />
							<h:outputText id="color" value="#{tableBean.selectedCar.color}" />
						</h:panelGrid>
					</p:outputPanel>
					
				</p:dialog>
				
			</h:form>
			
			<h3>Source</h3>
			<p:tabView>
				<p:tab title="carouselSelect.xhtml">
				<pre name="code" class="xml">
&lt;h:form prependId="false"&gt;
	&lt;p:carousel value="\#{tableBean.carsSmall}" var="car" itemStyleClass="carItem" headerText="Cars"&gt;
		&lt;p:column&gt;
			&lt;h:panelGrid columns="1" style="width:100%" cellpadding="5"&gt;
				&lt;p:graphicImage value="/images/cars/\#{car.manufacturer}.jpg"/&gt; 
				
				&lt;h:outputText value="Model: \#{car.model}" /&gt;
				
				&lt;p:commandLink update="carDetail" oncomplete="carDialog.show()" title="View Detail"&gt;
					&lt;p:graphicImage value="/images/search.png"/&gt; 
					&lt;f:setPropertyActionListener value="\#{car}" 
							target="\#{tableBean.selectedCar}" /&gt;
				&lt;/p:commandLink&gt;
			&lt;/h:panelGrid&gt;
		&lt;/p:column&gt;
	&lt;/p:carousel&gt;

	&lt;p:dialog header="Car Detail" showEffect="fade" hideEffect="fade" modal="true"
		widgetVar="carDialog"&gt;
		
		&lt;p:outputPanel id="carDetail" style="text-align:center;" layout="block"&gt;
			&lt;p:graphicImage value="/images/cars/\#{tableBean.selectedCar.manufacturer}.jpg"/&gt;
			
			&lt;h:panelGrid  columns="2" cellpadding="5"&gt;
				&lt;h:outputLabel for="modelNo" value="Model No: " /&gt;
				&lt;h:outputText id="modelNo" 
						value="\#{tableBean.selectedCar.model}" /&gt;
				
				&lt;h:outputLabel for="year" value="Year: " /&gt;
				&lt;h:outputText id="year" 
						value="\#{tableBean.selectedCar.year}" /&gt;
				
				&lt;h:outputLabel for="color" value="Color: " /&gt;
				&lt;h:outputText id="color" v
						alue="\#{tableBean.selectedCar.color}" 
						style="color:\#{tableBean.selectedCar.color}"/&gt;
			&lt;/h:panelGrid&gt;
		&lt;/p:outputPanel&gt;
		
	&lt;/p:dialog&gt;
	
&lt;/h:form&gt;
				</pre>
				</p:tab>
				
				<p:tab title="TableBean.java">
				<pre name="code" class="java">
package org.primefaces.examples.view;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.UUID;

import javax.servlet.ServletContext;

import org.primefaces.examples.domain.Car;

public class TableBean {

	private List&lt;Car&gt; cars;
	
	private Car selectedCar;

	public TableBean() {
		cars = new ArrayList&lt;Car&gt;();
		
		for(int i = 0 ; i &lt; 9 ; i++)
			list.add(new Car("Model_" + i, getRandomYear(), "Brand_" + i, "Color_" + i));
	}

	public Car getSelectedCar() {
		return selectedCar;
	}
	public void setSelectedCar(Car selectedCar) {
		this.selectedCar = selectedCar;
	}

	public List&lt;Car&gt; getCars() {
		return cars;
	}
}
				</pre>
				</p:tab>
			</p:tabView>
			
		</div>

	</ui:define>
</ui:composition>